<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>恋爱餐厅小程序 - 原型图</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="prototype-container">
        <!-- 导航栏 -->
        <div class="nav-tabs">
            <div class="tab active" data-page="home">首页</div>
            <div class="tab" data-page="menu">菜单</div>
            <div class="tab" data-page="cart">购物车</div>
            <div class="tab" data-page="order">订单</div>
            <div class="tab" data-page="profile">我的</div>
        </div>

        <!-- 页面内容区域 -->
        <div class="page-container">
            <!-- 首页 -->
            <div class="page active" id="home">
                <div class="header">
                    <div class="couple-info">
                        <div class="avatar-container">
                            <div class="avatar">
                                <img src="images/avatar1.svg" alt="用户头像">
                            </div>
                            <div class="avatar partner">
                                <img src="images/avatar2.svg" alt="伴侣头像">
                            </div>
                        </div>
                        <div class="couple-details">
                            <div class="names">小明 & 小红</div>
                            <div class="relationship-days">在一起 <span>365</span> 天</div>
                        </div>
                    </div>
                    <div class="points-display">
                        <div class="points">1000 <i class="fas fa-heart"></i></div>
                        <div class="points-label">爱心积分</div>
                    </div>
                </div>

                <div class="banner">
                    <img src="images/banner.svg" alt="Banner">
                    <div class="banner-text">今日特餐：浪漫烛光晚餐</div>
                </div>

                <div class="quick-actions">
                    <div class="action-item">
                        <div class="action-icon"><i class="fas fa-utensils"></i></div>
                        <div class="action-name">点餐</div>
                    </div>
                    <div class="action-item">
                        <div class="action-icon"><i class="fas fa-heart"></i></div>
                        <div class="action-name">积分</div>
                    </div>
                    <div class="action-item">
                        <div class="action-icon"><i class="fas fa-calendar-alt"></i></div>
                        <div class="action-name">事件</div>
                    </div>
                    <div class="action-item">
                        <div class="action-icon"><i class="fas fa-bell"></i></div>
                        <div class="action-name">通知</div>
                    </div>
                </div>

                <div class="section-title">推荐菜品</div>
                <div class="dish-list">
                    <div class="dish-card">
                        <div class="dish-image">
                            <img src="images/dish1.svg" alt="菜品图片">
                        </div>
                        <div class="dish-info">
                            <div class="dish-name">甜蜜双人牛排</div>
                            <div class="dish-description">精选牛排，心形摆盘</div>
                            <div class="dish-points">50 <i class="fas fa-heart"></i></div>
                        </div>
                    </div>
                    <div class="dish-card">
                        <div class="dish-image">
                            <img src="images/dish2.svg" alt="菜品图片">
                        </div>
                        <div class="dish-info">
                            <div class="dish-name">浪漫心形蛋糕</div>
                            <div class="dish-description">甜蜜造型，满足双方</div>
                            <div class="dish-points">40 <i class="fas fa-heart"></i></div>
                        </div>
                    </div>
                </div>

                <div class="section-title">积分活动</div>
                <div class="events-list">
                    <div class="event-card">
                        <div class="event-icon"><i class="fas fa-kiss-wink-heart"></i></div>
                        <div class="event-info">
                            <div class="event-name">早安吻</div>
                            <div class="event-points">+10 <i class="fas fa-heart"></i></div>
                        </div>
                        <button class="event-trigger">领取</button>
                    </div>
                    <div class="event-card">
                        <div class="event-icon"><i class="fas fa-hands-helping"></i></div>
                        <div class="event-info">
                            <div class="event-name">洗碗</div>
                            <div class="event-points">+20 <i class="fas fa-heart"></i></div>
                        </div>
                        <button class="event-trigger">领取</button>
                    </div>
                </div>
            </div>

            <!-- 菜单页 -->
            <div class="page" id="menu">
                <div class="search-bar">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="搜索菜品">
                </div>

                <div class="category-tabs">
                    <div class="category active">全部</div>
                    <div class="category">主食</div>
                    <div class="category">小吃</div>
                    <div class="category">饮品</div>
                    <div class="category">甜点</div>
                </div>

                <div class="filter-options">
                    <div class="filter">
                        <i class="fas fa-filter"></i> 筛选
                    </div>
                    <div class="sort">
                        <i class="fas fa-sort"></i> 排序
                    </div>
                </div>

                <div class="menu-list">
                    <div class="dish-card">
                        <div class="dish-image">
                            <img src="images/dish1.svg" alt="菜品图片">
                            <div class="dish-tag">推荐</div>
                        </div>
                        <div class="dish-info">
                            <div class="dish-name">甜蜜双人牛排</div>
                            <div class="dish-description">精选牛排，心形摆盘</div>
                            <div class="dish-footer">
                                <div class="dish-points">50 <i class="fas fa-heart"></i></div>
                                <div class="add-to-cart"><i class="fas fa-plus-circle"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="dish-card">
                        <div class="dish-image">
                            <img src="images/dish2.svg" alt="菜品图片">
                        </div>
                        <div class="dish-info">
                            <div class="dish-name">浪漫心形蛋糕</div>
                            <div class="dish-description">甜蜜造型，满足双方</div>
                            <div class="dish-footer">
                                <div class="dish-points">40 <i class="fas fa-heart"></i></div>
                                <div class="add-to-cart"><i class="fas fa-plus-circle"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="dish-card">
                        <div class="dish-image">
                            <img src="images/dish3.svg" alt="菜品图片">
                            <div class="dish-tag hot">辣</div>
                        </div>
                        <div class="dish-info">
                            <div class="dish-name">情侣麻辣火锅</div>
                            <div class="dish-description">鸳鸯锅，麻辣与清淡</div>
                            <div class="dish-footer">
                                <div class="dish-points">60 <i class="fas fa-heart"></i></div>
                                <div class="add-to-cart"><i class="fas fa-plus-circle"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="dish-card">
                        <div class="dish-image">
                            <img src="images/dish4.svg" alt="菜品图片">
                        </div>
                        <div class="dish-info">
                            <div class="dish-name">爱心水果拼盘</div>
                            <div class="dish-description">新鲜水果，爱心造型</div>
                            <div class="dish-footer">
                                <div class="dish-points">30 <i class="fas fa-heart"></i></div>
                                <div class="add-to-cart"><i class="fas fa-plus-circle"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 购物车页 -->
            <div class="page" id="cart">
                <div class="cart-header">
                    <div class="cart-title">购物车</div>
                    <div class="cart-actions">
                        <button class="clear-cart">清空</button>
                    </div>
                </div>

                <div class="cart-items">
                    <div class="cart-item">
                        <div class="item-image">
                            <img src="images/dish1.svg" alt="菜品图片">
                        </div>
                        <div class="item-info">
                            <div class="item-name">甜蜜双人牛排</div>
                            <div class="item-points">50 <i class="fas fa-heart"></i></div>
                        </div>
                        <div class="item-quantity">
                            <button class="quantity-btn minus"><i class="fas fa-minus"></i></button>
                            <span class="quantity">1</span>
                            <button class="quantity-btn plus"><i class="fas fa-plus"></i></button>
                        </div>
                    </div>
                    <div class="cart-item">
                        <div class="item-image">
                            <img src="images/dish2.svg" alt="菜品图片">
                        </div>
                        <div class="item-info">
                            <div class="item-name">浪漫心形蛋糕</div>
                            <div class="item-points">40 <i class="fas fa-heart"></i></div>
                        </div>
                        <div class="item-quantity">
                            <button class="quantity-btn minus"><i class="fas fa-minus"></i></button>
                            <span class="quantity">2</span>
                            <button class="quantity-btn plus"><i class="fas fa-plus"></i></button>
                        </div>
                    </div>
                </div>

                <div class="special-requests">
                    <textarea placeholder="特殊要求（可选）"></textarea>
                </div>

                <div class="cart-summary">
                    <div class="summary-item">
                        <div class="summary-label">共 3 件商品</div>
                        <div class="summary-value">130 <i class="fas fa-heart"></i></div>
                    </div>
                </div>

                <div class="cart-footer">
                    <div class="total-points">总计: 130 <i class="fas fa-heart"></i></div>
                    <button class="checkout-btn">提交订单</button>
                </div>
            </div>

            <!-- 订单页 -->
            <div class="page" id="order">
                <div class="order-tabs">
                    <div class="order-tab active">全部</div>
                    <div class="order-tab">待确认</div>
                    <div class="order-tab">已完成</div>
                    <div class="order-tab">已取消</div>
                </div>

                <div class="order-list">
                    <div class="order-card">
                        <div class="order-header">
                            <div class="order-number">订单号: 202405010001</div>
                            <div class="order-status pending">待确认</div>
                        </div>
                        <div class="order-items">
                            <div class="order-item">
                                <div class="item-image">
                                    <img src="images/dish1.svg" alt="菜品图片">
                                </div>
                                <div class="item-details">
                                    <div class="item-name">甜蜜双人牛排</div>
                                    <div class="item-quantity">x1</div>
                                </div>
                                <div class="item-points">50 <i class="fas fa-heart"></i></div>
                            </div>
                            <div class="order-item">
                                <div class="item-image">
                                    <img src="images/dish2.svg" alt="菜品图片">
                                </div>
                                <div class="item-details">
                                    <div class="item-name">浪漫心形蛋糕</div>
                                    <div class="item-quantity">x2</div>
                                </div>
                                <div class="item-points">80 <i class="fas fa-heart"></i></div>
                            </div>
                        </div>
                        <div class="order-footer">
                            <div class="order-time">2024-05-01 18:30</div>
                            <div class="order-total">总计: 130 <i class="fas fa-heart"></i></div>
                        </div>
                        <div class="order-actions">
                            <button class="cancel-order">取消订单</button>
                        </div>
                    </div>

                    <div class="order-card">
                        <div class="order-header">
                            <div class="order-number">订单号: 202404280002</div>
                            <div class="order-status completed">已完成</div>
                        </div>
                        <div class="order-items">
                            <div class="order-item">
                                <div class="item-image">
                                    <img src="images/dish1.svg" alt="菜品图片">
                                </div>
                                <div class="item-details">
                                    <div class="item-name">情侣麻辣火锅</div>
                                    <div class="item-quantity">x1</div>
                                </div>
                                <div class="item-points">60 <i class="fas fa-heart"></i></div>
                            </div>
                        </div>
                        <div class="order-footer">
                            <div class="order-time">2024-04-28 19:15</div>
                            <div class="order-total">总计: 60 <i class="fas fa-heart"></i></div>
                        </div>
                        <div class="order-actions">
                            <button class="reorder">再来一单</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 个人中心页 -->
            <div class="page" id="profile">
                <div class="profile-header">
                    <div class="user-info">
                        <div class="user-avatar">
                            <img src="images/avatar1.svg" alt="用户头像">
                        </div>
                        <div class="user-details">
                            <div class="user-name">小明</div>
                            <div class="user-phone">138****1234</div>
                        </div>
                    </div>
                    <div class="partner-info">
                        <div class="partner-avatar">
                            <img src="images/avatar2.svg" alt="伴侣头像">
                        </div>
                        <div class="partner-details">
                            <div class="partner-name">小红</div>
                            <div class="partner-phone">139****5678</div>
                        </div>
                    </div>
                </div>

                <div class="points-card">
                    <div class="points-header">
                        <div class="points-title">我的积分</div>
                        <div class="points-action">积分记录 <i class="fas fa-chevron-right"></i></div>
                    </div>
                    <div class="points-value">1000 <i class="fas fa-heart"></i></div>
                    <div class="points-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 60%;"></div>
                        </div>
                        <div class="progress-text">再获得 500 积分升级为 "甜蜜恋人"</div>
                    </div>
                </div>

                <div class="menu-list">
                    <div class="menu-item">
                        <div class="menu-icon"><i class="fas fa-calendar-heart"></i></div>
                        <div class="menu-text">自定义事件</div>
                        <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon"><i class="fas fa-bell"></i></div>
                        <div class="menu-text">通知中心</div>
                        <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon"><i class="fas fa-chart-pie"></i></div>
                        <div class="menu-text">积分统计</div>
                        <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon"><i class="fas fa-cog"></i></div>
                        <div class="menu-text">设置</div>
                        <div class="menu-arrow"><i class="fas fa-chevron-right"></i></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="bottom-nav">
            <div class="nav-item active" data-page="home">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="nav-item" data-page="menu">
                <i class="fas fa-utensils"></i>
                <span>菜单</span>
            </div>
            <div class="nav-item" data-page="cart">
                <i class="fas fa-shopping-cart"></i>
                <span>购物车</span>
            </div>
            <div class="nav-item" data-page="order">
                <i class="fas fa-clipboard-list"></i>
                <span>订单</span>
            </div>
            <div class="nav-item" data-page="profile">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>

    <!-- 脚本已移至外部文件 script.js -->

</body>
</html>